import { IQuestionType, ISubject, IExamType, IExam } from '@/utils/interface';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'umi';
import { Select, Form, Input, Button, DatePicker,InputNumber,message} from 'antd';
import styles from './css/addPaper.less';
const AddTheTest: React.FC = () => {
  const dispatch = useDispatch();
  const { Option } = Select;
  const [startTime,setStartTime] = useState<number>(0)
  const [endTime,setEndTime] = useState<number>(0)
  const { subjects } = useSelector(
    (module) => (module as { question: { subjects: ISubject[] } }).question,
  );
  const { examTypes } = useSelector(
    (module) => (module as { question: { examTypes: IExamType[] } }).question,
  );
  const [form] = Form.useForm();
  useEffect(() => {
    dispatch({
      type: 'question/getQuestionType',
    });
    dispatch({
      type: 'question/getExamSubject',
    });
    dispatch({
      type: 'question/getExamType',
    });
  }, []);
  const inputLayout = {
    wrapperCol: { span: 10 },
  };
  const editorLayout = {
    wrapperCol: { span: 3 },
  };
  const editorLayouts = {
    wrapperCol: { span: 2 },
  };
  function onFinish(values: IExam) {
    let value=values
    value.start_time=startTime
    value.end_time=endTime
    console.log(value)
    let result=dispatch({
      type:'exam/getExam',
      payload:value,
    });
    (result as unknown as Promise<{ code: number, msg: string }>).then(res => {
      if (res.code === 1) {
          message.success(res.msg);
      } else {
          message.error(res.msg);
      }
      form.resetFields();
  })
  }
  function onOk(value: unknown) {
    let time:number=(value as { _d: number })._d;
    setStartTime(time*1)
  }
  function onOn(value: unknown) {
    let time:number=(value as { _d: number })._d
    setEndTime(time*1)
  }
  return (
    <Form
      className={styles.wrap}
      onFinish={onFinish}
      form={form}
      initialValues={{
        title: '',
        questions_stem: '',
        questions_answer: '',
      }}
    >
      <h1>添加试题 </h1>
      <div className={styles.cotent}>
        <label htmlFor="">
          <span className={styles.spans}>*</span> 试卷名称
        </label>
        <Form.Item
          {...inputLayout}
          name="title"
          rules={[{ required: true, message: '请输入试卷名称!' }]}
        >
          <Input />
        </Form.Item>
        <label htmlFor="">
          <span className={styles.spans}>*</span> 选择考试类型：
        </label>
        <Form.Item name="exam_id" {...editorLayout}>
          <Select>
            {(examTypes as IExamType[]).map((item, index) => {
              return (
                <Option key={index} value={item.exam_id}>
                  {item.exam_name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>

        <label htmlFor="">
          <span className={styles.spans}>*</span> 选择课程类型：
        </label>
        <Form.Item name="subject_id" {...editorLayout}>
          <Select>
            {(subjects as ISubject[]).map((item, index) => {
              return (
                <Option key={index} value={item.subject_id}>
                  {item.subject_text}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <label htmlFor="">
          <span className={styles.spans}>*</span> 设置题量
        </label>
        <Form.Item
          {...editorLayouts}
          name="number"
          rules={[{ required: true, message: '请设置题量' }]}
        >
          <InputNumber min={3} defaultValue={3}/>
        </Form.Item>

        <label htmlFor="">
          <span className={styles.spans}>*</span> 考试时间
        </label>
        <div className={styles.time}>
          <Form.Item
            name="start_time"
            rules={[{ required: true, message: '请选择开始时间' }]}
          >
            <DatePicker showTime onOk={onOk} size="large" />
          </Form.Item>
          <span className={styles.span}> - </span>
          <Form.Item
            name="end_time"
            rules={[{ required: true, message: '请选择结束时间' }]}
          >
            <DatePicker showTime onOk={onOn} size="large" />
          </Form.Item>
        </div>
        <Button type="primary" htmlType="submit" className={styles.btn}>
          创建试卷
        </Button>
      </div>
    </Form>
  );
};
export default AddTheTest;
